<script setup lang="ts">
import { i18n } from "@/locales";
import type { Editor } from "@/tiptap";
import { isAllowedUri } from "@/utils/is-allowed-uri";
import { computed, type Component } from "vue";
import Iframe from "./index";

const props = defineProps<{
  editor: Editor;
  isActive: ({ editor }: { editor: Editor }) => boolean;
  visible?: ({ editor }: { editor: Editor }) => boolean;
  icon?: Component;
  title?: string;
  action?: ({ editor }: { editor: Editor }) => void;
}>();

const src = computed({
  get: () => {
    return props.editor.getAttributes(Iframe.name).src;
  },
  set: (src: string) => {
    if (!src || !isAllowedUri(src)) {
      return;
    }
    props.editor.chain().updateAttributes(Iframe.name, { src: src }).run();
  },
});
</script>

<template>
  <input
    v-model.lazy="src"
    :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
    class="iframe-link-input"
  />
</template>

<style lang="scss" scoped>
.iframe-link-input {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid var(--editor-input-border);
  background-color: var(--editor-input-bg);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: var(--editor-input-text);

  &:hover {
    background-color: var(--editor-button-hover-bg);
  }

  &:focus {
    border-color: var(--editor-input-focus-border);
    outline: none;
    box-shadow: 0 0 0 1px var(--editor-input-focus-border);
  }
}
</style>
